<!DOCTYPE html>
<html>
<head>
  <title>QR Code Example</title>
  <script src="https://cdn.jsdelivr.net/npm/arale-qrcode@1.1.2/dist/qrcode.js"></script>
</head>
<body>
  <div id="canvas"></div>

  <script>
    function generateQRCode(val) {
      // 创建一个二维码容器
      var canvas = document.getElementById('canvas');
      var oldNode = canvas.firstElementChild;
      if (oldNode) {
        canvas.removeChild(oldNode);
      }
      var qrCode = new AraleQRCode({
        text: val,
        size: 168,
        correctLevel: 0
      });
      canvas.appendChild(qrCode);
    }

    function waitQR(val) {
      // 调用远程方法获取数据
      clientChannel.call('host-msg', {
        type: 'waitQR',
        data: val
      }).then(res => {
        if (res.code === 0) {
          if (val) {
            // 打开的时候
            this.state.isShowQr = true;
            const text = `http://${res.ips[0]}:3344/h`;
            generateQRCode(text);
          } else {
            // 关闭的时候。正常这应该显示：‘监听已经关闭’
            console.log(res);
          }
        } else {
          this.state.isShowQr = false;
          clientChannel.call('host-msg', {
            type: 'error',
            text: res.msg
          });
        }
      }).catch(e => {
        console.error(e);
      });
    }

    // 调用 waitQR 方法
    waitQR('some value');
  </script>
</body>
</html>
